<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta content="telephone=no" name="format-detection" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>{$liveinfo['title']|default=$config['sitename']}</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/share/css/swiper.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/share/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/share/css/style.css">

	<link href="__PUBLIC__/share/css/video-js.min.css" rel="stylesheet">
    <script type="text/javascript" src="__PUBLIC__/share/js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="__PUBLIC__/share/js/swiper.js"></script>
    <script type="text/javascript" src="__PUBLIC__/share/js/txbb-pop.js"></script>
    <script type="text/javascript" src="__PUBLIC__/share/js/template.js"></script> 
    <script type="text/javascript" src="__PUBLIC__/share/js/socket.io.js"></script> 
    <script type="text/javascript">
        var room_id = '{$liveinfo['stream']}';
        var to_uid = '{$liveinfo['uid']}';
        var User = {$userinfoj};
        var level={$levellistj};
        var level_anchor={$levelanchorlistj};
		
		var isiPad = /iPad/i.test(navigator.userAgent);
		var isiPhone = /iPhone|iPod/i.test(navigator.userAgent);
		var isAndroid = /Android/i.test(navigator.userAgent);
		var isWeixin = /MicroMessenger/i.test(navigator.userAgent);
		var isQQ = /QQ/i.test(navigator.userAgent);
		var isIOS = (isiPad || isiPhone);
		var isWeibo = /Weibo/i.test(navigator.userAgent);
		var isApp = (isAndroid || isIOS);
		
		if(isWeixin && !User){
			window.location.href='/wxshare/index.php/Share/wxLogin?roomnum='+to_uid;
		}
		
		var fly="";
        var videosrc='{$hls}';//{$hls}  //
		var livetype='{$livetype}';
        var myPlayer;
        var h=window.screen.height;
        var videotimer='',request='';
		var socket = new io("{$configpri['chatserver']}");

        $(function(){
            videotimer=setTimeout("connectChange()", 1000);
        });

        function connectChange(){
					myPlayer = videojs("videoHLS");
					if(livetype==0){
						if(videosrc){
							$("#videoPlay").show(); 
							var div='<button id="play"><img src="__PUBLIC__/share/images/play.png" width="61"></button>';
							$("#top_box").append(div);
							$("#state").hide();
							myPlayer.height(h);
							myPlayer.show()
							$("#top_box").show();
						}else{
							$("#videoPlay").hide();   
							$("#play").remove();       
							$("#state").show();
							$("#top_box").hide();
							$(".jw-preview").show();
							$(".section1_box .roomtitle").remove();
							clearInterval(videotimer);
							return !1;
						}
					}else{
						$("#state h2").html("该房间为密码或收费房间，请下载APP观看....");
						$("#videoPlay").hide();   
						$("#play").remove();       
						$("#state").show();
						$("#top_box").hide();
						$(".jw-preview").show();
						$(".section1_box .roomtitle").remove();
						clearInterval(videotimer);
						return !1;
					}
            //开始或恢复播放
            myPlayer.on('play', function() {  
                if(document.getElementById('roomtitle')) {
                    $("#roomtitle").remove();
                }
                if(isAndroid){
                    var html='<div id="roomtitle" class="roomtitle">&nbsp;</div>';
                    $(".section1_box .header").prepend(html);
                }
                //myPlayer.height(h);
                $("#top_box").hide();
                $(".jw-preview").hide();

            });
            // 暂停播放
            myPlayer.on('pause', function() { 
                $(".section1_box .roomtitle").remove(); 
                $("#top_box").show();
            });

      }
    </script> 
	 <script type="text/javascript" src="__PUBLIC__/share/js/eventListen.js"></script> 
</head>
<body>

<!--视频-->
<section class="section1">
    <article class="jwplayer jw-reset jw-stretch-fill">
        <div class="jw-media jw-reset">
            <div id="videoPlay" style="width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;">
                <video id="videoHLS" class="video-js vjs-big-play-centered" style="width:100%;"  data-setup="{'preload': 'auto'}" webkit-playsinline  playsinline  x-webkit-airplay="true" x5-video-player-type="h5"  x5-video-player-fullscreen="true" poster="">
                    <source src="{$hls}" type="application/x-mpegURL">
                </video>
            </div>
            <div id="state" style="text-align:center;line-height:40px;position:absolute;top:35%;z-index:11;color:#fff;padding:20px;display:none;">
                <h2>
				<if condition="$liveinfo['type'] eq 1">
						抱歉，这个房间是密码房间...
					<elseif condition="$liveinfo['type'] gt 1"/>
						抱歉，这个房间是收费房间...
					<else/>
						抱歉，这个房间的主播已经退出房间啦...
					</if></h2>
            </div>
            <div class="jw-preview jw-reset" style="background-image: url('{$liveinfo['avatar']}')"></div>
        </div>
    </article>
 
    <article class="section1_box" id="section1_box">
        <header class="header clearfix">
            <div class="clearfix">
                <div class="userinfo">
                    <img src="{$liveinfo['avatar_thumb']}" userid="{$liveinfo['goodnum']}">
                    <span class="ulive">{$liveinfo['user_nicename']}</span>
                    <span class="unum">房间号：{$liveinfo['goodnum']}</span>
                </div>
                <div class="userimg" id="userimg">
                    <ul class="userpic clearfix" id="userpic"></ul>
                </div>

				<if condition="$isattention eq 1">
				<div class="user_followed on" type="1">
					已关注
				</div>
				<else/>
				<div class="user_followed" type="0">
					关注
				</div>
				</if>
            </div>
            <span class="charmval" userid="836">
                <span class="meilizhi">投票</span>
                <span class="mlz_num"></span>
            </span>
        </header>

        <article class="msg-box" id="upchat_hall">
            <div class="msg-con" id="chat_hall"></div>
        </article>

        <article class="chat_input">
            <div class="chat_barrage">
                <span>弹幕</span>
            </div>
            <span class="text_input">
                <input id="message" name="textfield" type="text" class="input" placeholder="点击这输入文字" value="" maxlength="200">
            </span>
            <span class="send" id="chat">
				发送
            </span>
        </article>

        <!--礼物列表-->
        <article class="chat_gift">
            <div class="swiper-container">
                <div class="swiper-wrapper" id="swiper-wrapper"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="chat_gift_send">
                <div class="balance"><a href="/wxshare/index.php/Share/pay">充值</a>：<span class="bglance_money">{$userinfo['coin']}</span><span class="gift-coin"></span><span class="gift-bbar-text">></span> </div>
				<div class="send_button">发送</div>
            </div>
			<div class="gift-countdown-bg" id="gift_countdown_bg">
				<div class="gift-countdown-btn">
                    <p class="gift-countdown-btn-text" onselectstart="return false">连发</p>
                    <p class="gift-countdown-btn-time" onselectstart="return false">5</p>
                </div>
			</div>
        </article>
        <!--礼物列表-->

        <article id="heart"><canvas id="canvas"></canvas></article>

        <figure class="share_box">
            <figcaption class="share_title">分享至</figcaption>
            <div class="iShare iShare-32 iShare3">
                <a href="javascript:void(0);" class="iShare_wechat"><i class="icon iconfont wechat" style="vertical-align: -2px;">&#xe60a;</i><p>微信</p></a>
                <a href="javascript:void(0);" class="iShare_qq"><i class="icon iconfont qq" style="vertical-align: 1px;">&#xe60c;</i><p>QQ</p></a>
                <a href="#" class="iShare_qzone"><i class="icon iconfont qzone">&#xe60d;</i><p>QQ空间</p></a>
                <a href="#" class="iShare_tencent"><i class="icon iconfont tencent" style="vertical-align: -2px;">&#xe60b;</i><p>腾讯微博</p></a>
                <a href="#" class="iShare_weibo"><i class="icon iconfont weibo">&#xe60e;</i><p>新浪微博</p></a>
            </div>
        </figure>

        <nav class="chat-tool">
            <ul>
                <li><img src="__PUBLIC__/share/images/talk.png" id="talk-btn"></li>
                <li><img src="__PUBLIC__/share/images/sentgift.png" id="gift-btn"></li>
                <li style="width:20%;text-align:left;display:none;">
                    <img src="__PUBLIC__/share/images/ic_room_flash_normal.png" id="more-btn">
                    <div class="more_list">
                        <a class="more_share" id="more_share">分享</a>
                        <a href="" class="more_center" id="more_center">登陆</a>  
                    </div>
                </li>
                <li style="float:right;">
                    <a href="/wxshare/index.php/Share/index">                        
						<img src="__PUBLIC__/share/images/ic_room_btn_close_pressed.png">
                    </a>
                </li>
            </ul>
        </nav>

        <article id="top_box" style="display: none;">
            <!-- <button id="play"><img src="__PUBLIC__/share/images/play.png" width="61"></button> -->
        </article>

        <!--礼物显示效果-->
		<div class="hjPopGift hjPopGift_small first"><i class="icon-avatar"></i><div class="nickname"></div><div class="giftname"></div><i class="icon-gift"></i><div class="giftNum"></div></div>
		<div class="hjPopGift hjPopGift_small last"><i class="icon-avatar"></i><div class="nickname"></div><div class="giftname"></div><i class="icon-gift"></i><div class="giftNum"></div></div>
		<div class="hjPopGift hjPopGift_big"><div class="giftMsg"></div><img></div>

        <!--弹幕-->
        <div class="chat_barrage_box"></div>
		
    </article>
    <section class="touchbox" id="touchbox"></section>
	<!-- 下载 -->
	<div class="down-bottom" onclick="downurl()">
		<img src="__PUBLIC__/share/images/down.png">
	</div>
    <!--排行版-->
    <section id="contributionval"></section>
</section>
<!--视频-->

<!--QQ 微信分享提示-->
<section id="share_alert">
    <article class="share_prompt">
        <p></p>
    </article>
</section>
<!--QQ 微信分享提示-->

<!--点击用户头像显示信息-->
<section class="user_info_con" id="user_info_con"></section>

<!--手机号登录-->
<div id="login-btn"></div>
<div class="js-reg"></div>
<section id="login">
    <article class="login_form">
		<div class="warring js_reg_warring">请输入手机号码</div>
        <div class="phoneArea">
			<input type="text" class="phone js_reg_phone_input" placeholder="输入手机号码" maxlength="11">
		</div>
		<div class="key_con">
			<div class="keyBorder">
				<input class="key js_reg_code_input" type="text" placeholder="输入验证码" maxlength="6">
			</div>													
			<a class="get_none js_reg_getcode">获取验证码</a>
		</div>
		<a class="submit js_reg_submit get_none">确认</a>
    </article>
</section>

<!--排行榜模板-->
<script id="ranklist" type="text/html">
    <article class="contributionval_content">
        <div class="contr_close" onclick="Ctrfn.contr_close();"></div>
        <div class="contr_val"><img src="__PUBLIC__/share/images/me_ranking_yingpiao.png?v=1">(* wealth *)</div>
        <div class="contr_list">
            <ul class="contr_three">
                (*each list as value i*)
                    (*if i <= 2*)
                        <li class="contr_one">
                            <small>NO.(* i+1 *)</small>
                            <img class="contr_user" onerror="javascript:this.src='/style/avatar/0/0_big.jpg'" src="(*value.avatar*)">
                            <div class="contr_pic"></div>
                            <div class="contr_nickname">(*value.username*)
                                (*if value.sex == 1*)
                                <img class="sex1" src="__PUBLIC__/share/images/sex1.png"/>
                                (*else*)
                                <img class="sex1" src="__PUBLIC__/share/images/sex0.png"/>
                                (*/if*)
                                <img class="contr_lev" src="__PUBLIC__/share/images/level/public_icon_vip(*value.levelid*)@2x.png">
                            </div>
                            <div class="contr_nickname_num">贡献<span>(*value.coin*)</span>票</div>
                        </li>
                    (*/if*)
                (*/each*)
            </ul>
            <ul class="contr_ord">
               (*each list as value i*)
               (*if i > 2*)
                <li class="clearfix">
                    <small class="fl">NO.(*i+1*)</small>
                    <span class="contr_ord_mld fl"><img onerror="javascript:this.src='/style/avatar/0/0_big.jpg'" src="(*value.avatar*)"></span>
                    <div class="contr_ord_right">
                        <p>
                        <a>(*value.username*) </a>
                            (*if value.sex == 1*)
                            <img class="sex1" src="__PUBLIC__/share/images/sex1.png"/>
                            (*else*)
                            <img class="sex1" src="__PUBLIC__/share/images/sex0.png"/>
                            (*/if*)
                        <img class="contr_lev" src="__PUBLIC__/share/images/level/public_icon_vip(*value.levelid*)@2x.png"></p>
                        <p>贡献<span>(*value.coin*)</span>票</p>
                    </div>
                </li>
                (*/if*)
                (*/each*)
            </ul>
        </div>
    </article>
</script>
<!--排行榜模板-->

<!--礼物列表模板-->
<script id="giftlist" type="text/html">
    (*each pagenum as v k*)
    <article class="swiper-slide">
        (*each giftlist as value key*)
        (*if key>=(k)*8&&key<=(k+1)*8-1 *)
        <div>
            <img src="(*value.gifticon*)">
            <p>(*value.needcoin*)<i></i></p>
			<div class="gift-select (*if value.type ==0 *)gift-lian(*/if*)" data-id="(*value.id*)" data-giftname="(*value.giftname*)" data-type="(*value.type*)" data-money="(*value.needcoin*)"></div>
        </div>
        (*/if*)
        (*/each*)
    </article>
    (*/each*)
</script>
<!--礼物列表模板-->

<!--用户信息模板-->
<script id="userinfo" type="text/html">
    <div class="user_top clearfix"> 
        <button class="user_close"><img  src="__PUBLIC__/share/images/user_close.png"></button>
    </div>
    <div class="user_photo">
        <img  onerror="this.src=\'/style/avatar/0/0_big.jpg\'" src="(*avatar*)">
    </div>
    <div class="user_name">(*nickname*)
        (*if sex == 1*)
        <img class="sex1" src="__PUBLIC__/share/images/sex1.png"/>
        (*else*)
        <img class="sex1" src="__PUBLIC__/share/images/sex0.png"/>
        (*/if*)
        <img src="__PUBLIC__/share/images/level/public_icon_vip(*emceelevel*)@2x.png" width="30">
    </div>
    <div class="">
        ID: (*id*)
        <span>
        <img src="__PUBLIC__/share/images/user_dre.png">
        (*if city != ''*)
        (*province*)  (*city*)
        (*else*)
        火星
        (*/if*)
        </span>
    </div>
    <div class="user_authentication">
        <span class="sel"><img src="__PUBLIC__/share/images/sel.png"></span>
        认证：还没有哦
    </div>
    (*if intro !=null *)
    <div class="user_autograph">(*intro*)</div>
    (*else*)
    <div class="user_autograph">这家伙很懒，什么都没有留下</div>
    (*/if*)
    <div class="user_follow">
        <div><span><small>关注： (*followees_cnt*)</small></span>|<span class="user_fw_span">粉丝： (*followers_cnt*)</span></div>
        <div>
            <span  class="user_fw_sn">送出： (*total_contribution*)</span>
            |
            <span><small>票数： (*beanorignal*)</small></span>
        </div>
    </div>
</script>
<!--用户信息模板-->

<!--主播信息模板-->
<script id="anchorInfo" type="text/html">
    <div class="user_top clearfix"> 
                <button class="user_close"><img  src="__PUBLIC__/share/images/user_close.png"></button>
    </div>
    <div class="user_photo">
        <img  onerror="this.src=\'/style/avatar/0/0_big.jpg\'" src="(*avatar*)">
    </div>
    <div class="user_name">(*nickname*)
        (*if sex == 1*)
        <img class="sex1" src="__PUBLIC__/share/images/sex0.png"/>
        (*else*)
        <img class="sex1" src="__PUBLIC__/share/images/sex1.png"/>
        (*/if*)
        <img src="__PUBLIC__/share/images/level/public_icon_vip(*emceelevel*)@2x.png" width="30">
    </div>
    <div class="">
        ID: (*id*)
        <span>
        <img src="__PUBLIC__/share/images/user_dre.png">
        (*if city != ''*)
            (*province*)  (*city*)
        (*else*)
        火星
        (*/if*)
        </span>
    </div>
    <div class="user_authentication">
        <span class="sel"><img src="__PUBLIC__/share/images/sel.png"></span>
        认证：还没有哦
    </div>
    (*if intro !=null*)
    <div class="user_autograph">(*intro*)</div>
    (*else*)
    <div class="user_autograph">这家伙很懒，什么都没有留下</div>
    (*/if*)
    <div class="user_follow">
        <div><span><small>关注： (*followees_cnt*)</small></span>|<span class="user_fw_span">粉丝： (*followers_cnt*)</span></div>
        <div>
            <span  class="user_fw_sn">送出： (*total_contribution*)</span>
            |
            <span><small>票数： (*beanorignal*)</small></span>
        </div>
    </div>
</script>
<!--主播信息模板-->
<script type="text/javascript" src="__PUBLIC__/share/js/video.js"></script>
<script type="text/javascript" src="__PUBLIC__/share/js/videojs-contrib-hls.js"></script>


<script type="text/javascript" src="__PUBLIC__/share/js/common.js?t=1541744217"></script>
<script type="text/javascript" src="__PUBLIC__/share/js/iShare.js"></script>
<script type="text/javascript" src="__PUBLIC__/share/js/gift.js?t=1541744217"></script>
<script type="text/javascript" src="__PUBLIC__/share/js/jquery.md5.js"></script>
<script type="text/javascript" src="__PUBLIC__/share/js/login.js"></script>


<script type="text/javascript">
    (new iShare({container:'.iShare3',config:{
        title: '分享标题',
        description: '这是分享描述文本',
        url: '',
    }}));

    var mode = 1;//代表手机直播手机观看
    //点击微信分享
    /*$(".iShare_wechat").click(function(){
        var objbtn=$(this);
        Ctrfn.iShare(objbtn);
    })*/
    //点击QQ分享
    /*$(".iShare_qq").click(function(){
        var objbtn=$(this);
        Ctrfn.iShare(objbtn);
    })*/
   /*$("#share_alert").click(function(){
        $(this).hide();
   })*/
    //微信支付
    /*$(".weixin_pay").click(function(){
        Ctrfn.wxPay();
    })*/
    //分享
    $("#more_share").click(function(e){
        Ctrfn.moreShare();
    })
    $("#more-btn").click(function(e){
        Ctrfn.moreBtn(); 
    })
	
	function downurl(){
		var href='';
		if(isIOS){
			href='{$config['app_ios']}';
		}else{
			href='{$config['app_android']}';
		}
		location.href=href;
		return !1;
	}
 
    //弹幕
    $(".chat_barrage span").click(function(){
        if($(this).parent().hasClass("animte")){
            $(this).parent().removeClass("animte");
            fly=""
        }else{
            $(this).parent().addClass("animte");
            $("#message").val("").focus();
            fly="FlyMsg"
        }
    })
    $("#chat").click(function(){
        var url='/wxshare/index.php/Share/sendBarrage';
        Ctrfn.onmessage(url);
    })
    var focusstatus = 0;
    $(document).on("click",".user_followed",function(){
		var isattention=$(this).attr('type');
		if(isattention==1 || !User){
		  return !1;
		}
		var url = "/wxshare/index.php/Share/follow";
		var _this = $(this);
		$.ajax({
			type: 'POST',
			url: url,
			data:{'touid':to_uid},
			dataType:'json',
			success: function(data){
				if (data.code== 0){
					_this.addClass("on");
					_this.attr("type",1);
					_this.text('已关注');
				}
			}
		});
   })
    //点击聊天按钮，显示输入框
    $("#talk-btn").click(function(e){
		if(User){
			Ctrfn.talkBtn(e)
		}else{
			downurl();
		}
    })
    
    //点击礼物tool
    $("#gift-btn").click(function(){
		if(User){
			Ctrfn.giftTool()
		}else{
			downurl();
		}
    })
	
	$(".send_button,.gift-countdown-bg").click(function(){
		Ctrfn.sendBtn()
    })

    //阻止事件冒泡
    $(".chat_input").click(function (e){
            e.stopPropagation();
        });

    //点击播放按钮
    $(document).on("click","#play",function(){
        var objbtn=$(this);
        Ctrfn.play(objbtn);
    })
    //点击魅力值
    /*$(".charmval").click(function(){
        var objbtn=$(this);
        var url='/OpenAPI/V1/user/sharecontributelist';
        Ctrfn.charmval(objbtn,url);
    })*/

    //聊天提示时关闭提示框
    function closechatdialog(){
        $('#message').focus();
    }

    //点击礼物
    $(document).on("click",".swiper-slide > div",function(e){
        var objbtn=$(this);
        Ctrfn.giftBtn(objbtn);
    })

    //加载礼物tool
    $(function(){
		if(User){
			$.ajax({
				url:'/wxshare/index.php/Share/getGift',
				type: 'post',
				data:{},
				dataType: 'json',
				success: function(data) {
					var pagenum=Math.ceil(data.info.length/8);
					var num=[];
					for(var i=1;i<pagenum;i++){
						num[i]=i;
					}
					var gift = {
						giftlist: data.info,
						pagenum:num,
					};
					var html = template('giftlist', gift);
					document.getElementById('swiper-wrapper').innerHTML = html;
					//礼物列表切换
					var swiper = new Swiper('.swiper-container', {
						pagination: '.swiper-pagination',
						paginationClickable: true,
						observer: true,
						observeParents: true
					});
				}
			}); 
        }
		
    })

    //滑动清屏
    /*var viewport = document.getElementById("touchbox");
    var obj = document.getElementById("section1_box");
    document.addEventListener('touchstart', function(e) {
        var touch = e.touches[0];
        startX = touch.pageX;
        startY = touch.pageY;
    }, false)
    document.addEventListener('touchmove', function(e) {
        var touch = e.touches[0];
        var deltaX = touch.pageX - startX;
        var deltaY = touch.pageY - startY;
        //如果X方向上的位移大于Y方向，则认为是左右滑动
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 50){
            obj.className="section1_box animte";
            $(".chat_gift").fadeOut();
            $(".chat_input").hide();
            $(".chat_barrage ").removeClass("animte");
            fly=""
            $(".chat-tool").show();
        }else{
            obj.className="section1_box";
        }
    }, false)*/

    //点击用户头像
	/*$(document).on("click",".userpic li > img",function(){
        var objbtn=$(this);
        var url='/OpenAPI/V1/user/shareProfile';
        Ctrfn.userpicBtn(objbtn,url);
	})
	$(document).on("click",".user_close",function(){
		$('.user_info_con').hide();
	});*/

    //点击主播头像显示详情
    /*$(".section1_box .userinfo > img").click(function(){
        var objbtn=$(this);
        if(User.islogin == "true"){
            var url='/OpenAPI/V1/user/profile';
        }else{
            var url='/OpenAPI/V1/user/shareProfile';
        }
        Ctrfn.userinfoBtn(objbtn,url);
    })*/
</script>
</body>
</html> 
